@import '../../style/variable.scss';


:host {
    font-size: 0;
    line-height: 1;
  }
.xxm-loading-ls{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: $loading-spinner-color;
  
    &__spinner {
      position: relative;
      box-sizing: border-box;
      width: $loading-spinner-size;
      // compatible for 0.x, users may set width or height in root element
      max-width: 100%;
      max-height: 100%;
      height: $loading-spinner-size;
      animation: xxm-rotate $loading-spinner-animation-duration linear infinite;
  
      &--spinner {
        animation-timing-function: steps(12);
      }
  
      &--circular {
        border: 1px solid transparent;
        border-top-color: currentColor;
        border-radius: 100%;
      }
    }
  
    &__text {
      margin-left: $padding-xs;
      color: $loading-text-color;
      font-size: $loading-text-font-size;
      line-height: $loading-text-line-height;
  
      &:empty {
        display: none;
      }
    }
  
    &--vertical {
      flex-direction: column;
  
      .van-loading__text {
        margin: $padding-xs 0 0;
      }
    }
  
    &__dot {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  
      &::before {
        display: block;
        width: 2px;
        height: 25%;
        margin: 0 auto;
        background-color: currentColor;
        border-radius: 40%;
        content: ' ';
      }
    }
}

@mixin generate($n, $i: 1) {
    @while $i<= $n {
        
        .xxm-loading__dot:nth-of-type(#{$i}) {
            transform: rotate($i * 30deg);
            opacity: 1 - (0.75 / 12) * ($i - 1);
          }
        //   @include generate($n, ($i + 1));
        $i: $i + 1
    }
    
  }
 @include generate(12);
  @keyframes xxm-rotate {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }